/*demo.js
  点击左按钮，盒子右移。 点击右按钮， 盒子左移。
*/
window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var leftBtn = $('.leftBtn');
  var rigBtn = $('.rigBtn');
  var boxUl = $('.box').querySelector('ul');
  var obj = {
    leftBtn: leftBtn, // 左按钮dom
    rigBtn: rigBtn, //右按钮dom
    _ul: boxUl, //要移动的ulDOM    
    inLiNum: 2, //ul外层盒子能容纳的li个数
    moveDistance: 130 // 点击一次移动的距离
  }
  leftOrRigAnimation(obj); //调用

  
  function leftOrRigAnimation(obj) {
    var flag1 = true;
    var flag2 = true;
    var inLiNum = obj.inLiNum;
    var overLiNum = obj._ul.children.length - inLiNum;
    obj.rigBtn.onclick = function() {
      if(obj._ul.offsetLeft >= 0) {
        flag1 = true; // 只要盒子在初始状态，右按钮就默认一直可点击
      }
      if(flag1) {
        flag1 = false;
        flag2 = false; // 盒子运动时，两按钮都关闭，防止重复点击和互相干扰
        if(obj._ul.offsetLeft <= parseInt(obj.moveDistance * - overLiNum)) {
          obj._ul.style.left = obj.moveDistance * - overLiNum + 'px';
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft - obj.moveDistance, function(){ //回调函数，表示点击过后的当次位移完成之后执行
            if(obj._ul.offsetLeft < 0) { //0点左侧
              flag2 = true;
            }
            // log('比较值: ', obj._ul.offsetLeft, obj.moveDistance * - overLiNum);
            if(obj._ul.offsetLeft <= parseInt(obj.moveDistance * - overLiNum)) { //到达最左端
              flag1 = false;
            }
            if(obj._ul.offsetLeft > obj.moveDistance * - overLiNum) { //0点和最左端之间
              flag1 = true;
            }
          });
        }
      }
    }
    obj.leftBtn.onclick = function() {
      if(obj._ul.offsetLeft <= parseInt(obj.moveDistance * - overLiNum)) {
        flag2 = true; // 只要盒子在最左端，就默认一直可点击
      }
      if(flag2) {
        flag2 = false;
        flag1 = false;
        if(obj._ul.offsetLeft >= 0) {
          obj._ul.style.left = 0;
        } else {
          animate(obj._ul, obj._ul.offsetLeft, obj._ul.offsetLeft + obj.moveDistance, function(){ 
            if(obj._ul.offsetLeft >= 0) { //0点
              flag2 = false;
            }
            if(obj._ul.offsetLeft > obj.moveDistance * - overLiNum) { //最左端往右
              flag1 = true;
            }
            if(obj._ul.offsetLeft < 0) {//0点左侧
              flag2 = true;
            } 
          });
        }
      }
    }
  }


  // 需要对start进行修正
  // 原因是style.left和offsetLeft在非整数时会不一致

  function animate(obj, start, end, cb) {
    function getAttr(obj) {
      return parseFloat(window.getComputedStyle(obj).left);
    }
    var _dif = getAttr(obj) - start;
    start = start == getAttr(obj) ? start : getAttr(obj);
    end = end + _dif;
    var step = (end - start) / 10;
    log('step: ', step);
    var n = 1;
    clearInterval(timer)
    function move() {
      obj.style.left = start + step * n + 'px';
      if(step >= 0) {
        if(obj.offsetLeft >= parseInt(end)) { 
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      } else if(step <= 0) {
        if(obj.offsetLeft <= parseInt(end)) {
          obj.style.left = Math.abs(end) <= 1 ? 0 : end.toFixed(4) + 'px';
          clearInterval(timer);
          cb && cb();
        }
      }
      n++;
    }
    var timer = setInterval(move, 30);
  }
  
})

